/******** FadeInUp ********/

@keyframes FadeInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInUp {
        animation: FadeInUp 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInUp {
        animation: FadeInUp 2s forwards;
    }
}

/******** FadeInLeft ********/

@keyframes FadeInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInLeft {
        animation: FadeInLeft 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInLeft {
        animation: FadeInLeft 2s forwards;
    }
}

/******** FadeInRight ********/

@keyframes FadeInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInRight {
        animation: FadeInRight 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInRight {
        animation: FadeInRight 2s forwards;
    }
}

/******** FadeInDown ********/

@keyframes FadeInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInDown {
        animation: FadeInDown 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInDown {
        animation: FadeInDown 2s forwards;
    }
}

/******** FadeOutUp ********/

@keyframes FadeOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(50px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutUp {
        animation: FadeOutUp 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutUp {
        animation: FadeOutUp 2s forwards;
    }
}

/******** FadeInLeft ********/

@keyframes FadeOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutLeft {
        animation: FadeOutLeft 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutLeft {
        animation: FadeOutLeft 2s forwards;
    }
}

/******** FadeOutRight ********/

@keyframes FadeOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutRight {
        animation: FadeOutRight 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutRight {
        animation: FadeOutRight 2s forwards;
    }
}

/******** FadeOutDown ********/

@keyframes FadeOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutDown {
        animation: FadeOutDown 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutDown {
        animation: FadeOutDown 2s forwards;
    }
}